<template>
    <div class="body">
        <!-- 右侧滑块改变背景透明度 -->
        <home-slider v-model="opacity" />
        <el-row class="home-header">
            <el-col :span="24">
                <!-- 登录用户的信息 -->
                <home-header />
            </el-col>
        </el-row>
        <div class="home-body">
            <!-- 首页主体 -->
            <home-body />
        </div>
    </div>
    <div id="background" :style="{ opacity: opacity / 100 }"></div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, inject } from "vue";
import { DiscoGirl } from "@/utils/three";
import HomeHeader from "@/views/system/components/home/HomeHeader.vue";
import HomeBody from "@/views/system/components/home/HomeBody.vue";
import HomeSlider from "@/views/system/components/home/HomeSlider.vue";

//获取自定义全局方法
const { authStore } = inject<any>("method");

//背景
const background = ref<any>(null);

//背景透明度
const opacity = ref<number>(authStore.homeBackgroundOpacity);

//挂载时执行
onMounted(() => {
    //加载背景
    background.value = new DiscoGirl("background");
});

//销毁背景
onBeforeUnmount(() => {
    background.value?.dispose();
});
</script>

<style scoped lang="less">
.body {
    z-index: 2;
    max-height: calc(100vh - 60px);
    position: relative;
    display: flex;
    flex-direction: column;
    .home-body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

#background {
    display: grid;
    top: 60px;
    position: fixed;
    z-index: 0;
}
</style>
